<template>
  <div class="register-container">
    <h2 class="page-title">{{ $localePath === "/" ? "用户注册" : "User Registration" }}</h2>
    <form @submit.prevent="handleRegister" class="register-form">
      <!-- 用户名输入 -->
      <div class="form-item">
        <label>{{ $localePath === "/" ? "用户名：" : "Username：" }}</label>
        <input
          type="text"
          v-model="form.username"
          required
          :placeholder="$localePath === '/' ? '3-20位字符，不含特殊符号' : '3-20 characters, no special symbols'"
          minlength="3"
          maxlength="20"
          class="form-input"
        />
      </div>
      <!-- 密码输入 -->
      <div class="form-item">
        <label>{{ $localePath === "/" ? "密码：" : "Password：" }}</label>
        <input
          type="password"
          v-model="form.password"
          required
          :placeholder="$localePath === '/' ? '6-20位字符，含字母和数字' : '6-20 characters, include letters and numbers'"
          minlength="6"
          maxlength="20"
          class="form-input"
        />
      </div>
      <!-- 邮箱输入 -->
      <div class="form-item">
        <label>{{ $localePath === "/" ? "邮箱：" : "Email：" }}</label>
        <input
          type="email"
          v-model="form.email"
          required
          :placeholder="$localePath === '/' ? '请输入有效邮箱（用于找回密码）' : 'Enter valid email (for password recovery)'"
          class="form-input"
        />
      </div>
      <!-- 注册按钮 -->
      <button type="submit" class="register-btn" :disabled="loading">
        <i class="fa fa-spinner fa-spin" v-if="loading"></i>
        <span v-if="loading">{{ $localePath === "/" ? "注册中..." : "Registering..." }}</span>
        <span v-else>{{ $localePath === "/" ? "注册" : "Register" }}</span>
      </button>
      <!-- 跳转登录页 -->
      <p class="login-link">
        {{ $localePath === "/" ? "已有账号？" : "Already have an account？" }}
        <a :href="$localePath + 'login/'">{{ $localePath === "/" ? "去登录" : "Go to Login" }}</a>
      </p>
    </form>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";

// 获取全局实例（用于调用 $axios 和 $toast）
const { proxy } = getCurrentInstance();
const router = useRouter();

// 表单数据
const form = ref({
  username: "",
  password: "",
  email: ""
});

// 加载状态
const loading = ref(false);

// 注册逻辑
const handleRegister = async () => {
  loading.value = true;
  try {
    // 调用后端注册接口（axios 已全局注入）
    const res = await proxy.$axios.post("/auth/register", form.value);
    // 注册成功（后端返回 code: 0）
    if (res.code === 0) {
      proxy.$toast.success(res.msg || ($localePath === "/" ? "注册成功，跳转登录页..." : "Registration success, redirecting to login..."));
      // 跳转登录页（适配多语言路径）
      setTimeout(() => {
        router.push($localePath + "login/");
      }, 1500);
    } else {
      // 注册失败（如用户名已存在）
      proxy.$toast.error(res.msg || ($localePath === "/" ? "注册失败，请重试" : "Registration failed, please try again"));
    }
  } catch (error) {
    // 网络错误（由 axios 拦截器统一处理，此处无需额外操作）
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
/* 注册容器样式 */
.register-container {
  max-width: 450px;
  margin: 40px auto;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  background: #fff;
}

/* 表单样式 */
.register-form {
  margin-top: 20px;
}

.form-item {
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-item label {
  font-weight: 500;
  color: #333;
  font-size: 14px;
}

.form-input {
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  transition: border 0.3s;
}

.form-input:focus {
  outline: none;
  border-color: #42b983;
  box-shadow: 0 0 0 2px rgba(66, 185, 131, 0.2);
}

/* 按钮样式 */
.register-btn {
  width: 100%;
  padding: 12px;
  background: #42b983;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.register-btn:disabled {
  background: #91e0b8;
  cursor: not-allowed;
}

/* 登录链接样式 */
.login-link {
  margin-top: 16px;
  text-align: center;
  color: #666;
  font-size: 14px;
}

.login-link a {
  color: #42b983;
  text-decoration: none;
}

.login-link a:hover {
  text-decoration: underline;
}
</style>